import {ModalForm, PageContainer, ProFormSelect, ProFormUploadDragger} from "@ant-design/pro-components";
import MpTable from "@/pages/Mp/components/MpTable";
import {useRef} from "react";
import {ActionType} from "@ant-design/pro-table";
import {observer} from "mobx-react-lite";
import {Upload} from "antd";
import {mpModel, UpdateMiniappDTO} from "@/models/mp";
import {ProFormText} from "@ant-design/pro-form/lib";
import {LoadingOutlined, PlusOutlined} from "@ant-design/icons";
import styled from "styled-components";
import {CustomerModel} from "@/models/customer";


const uploadButton = (
    <div>
        {mpModel.uploadLoading ? <LoadingOutlined/> : <PlusOutlined/>}
        <div style={{marginTop: 8}}>Upload</div>
    </div>
);

const AvatarUploader = styled.div`
  margin: 0 auto;

  .ant-upload-wrapper {
    justify-content: center;
  }
`

const Mp = () => {
    // 表格引用
    const tableRef = useRef<ActionType>()


    return <PageContainer title="公众号">
        {/*公众号表格 开始*/}
        <MpTable tableRef={tableRef}/>
        {/*公众号表格 结束*/}

        {/*<Modal*/}
        {/*    title={'设置小程序'}*/}
        {/*    width={500}*/}
        {/*    // visible={mpModel.createMiniappModelState}*/}
        {/*    visible={true}*/}
        {/*    onCancel={mpModel.closeCreateMiniappModel}*/}
        {/*>*/}
        {/*    小程序名称:<Input/>*/}
        {/*    法人身份证照片:<Input/>*/}
        {/*    营业执照:<Input/>*/}
        {/*</Modal>*/}

        <ModalForm<UpdateMiniappDTO>
            key={mpModel.current.id || -1}
            open={mpModel.createMiniappModelState}
            onOpenChange={mpModel.changeCreateMiniappModel}
            onFinish={mpModel.updateMiniapp}
            initialValues={mpModel.current}
        >
            <AvatarUploader>
                <Upload
                    name="file"
                    listType="picture-card"
                    className="avatar-uploader"
                    showUploadList={false}
                    action="/api/file/upload"
                    onChange={mpModel.handlerImageUpload}
                >
                    {mpModel.current.headImg ?
                        <img src={mpModel.current.headImg} alt="avatar" style={{width: '100%'}}/> : uploadButton}
                </Upload>
            </AvatarUploader>
            <ProFormText label="appId" disabled name="appId"/>
            <ProFormText label="小程序名称" name="nickName"/>
            <ProFormSelect label="应用" name="templateId"
                           options={[
                               {label: "粉丝节", value: 1},
                               {label: "抢先看", value: 2},
                               {label: "底片下载", value: 3},
                               {label: "云商城", value: 4},
                               {label: "管理后台小程序版", value: 5},
                           ]}
            />
            <ProFormUploadDragger
                name='idCard'
                fieldProps={{
                    name: 'file'
                }}
                transform={(v) => {
                    return {idCard: v[0].response.data[0].url}
                }
                }
                action={'/api/file/upload'}
                label="法人身份证"
            />
            <ProFormUploadDragger
                name='license'
                fieldProps={{
                    name: 'file'
                }}
                transform={(v) => {
                    return {license: v[0].response.data[0].url}
                }
                }
                action={'/api/file/upload'}
                label="营业执照"
            />
            <ProFormText label='小程序描述' name='signature'/>
        </ModalForm>
    </PageContainer>;
}

export default observer(Mp)
